<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>详情展示</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jqplot.js"></script>

<style type="text/css">
    body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        color:#555555;
        background: #fff;
    }
    .book{
        width: 100%;
        height: 100%;
        /*background: #eee;*/
    }
    .bookSou{
        width: calc(100% - 20px);
        padding: 10px;
        display: flex;
    }
    .bookSou input{
        width: calc(100% - 40px);
        
    }
    .souBtn{
        width: 30px;
        margin-left: 10px;
        line-height: 30px;
        text-align: center;
        border:1px solid #ccc;
        border-radius: 3px;
    }
    .bookTop{
        width: 100%;
        padding: 5px 0;
    }
    .bookN{
        width: 220px;
        margin:auto;
        display: flex;
        font-size: 17px;
    }
    .bookNL,.bookNR{
        width: 110px;
        text-align: center;
        line-height: 45px;
    }
    .bookfes{
        color: #1963AA;
        border-bottom: 1px solid #1963AA;
    }
    .bookCenter{
        width: calc(100% - 20px);
        background: #fff;
        padding: 0 10px;
    }
    .bookCx{
        line-height: 30px;
        padding: 10px 0;
        font-weight: bold;
        border-bottom:1px solid #ccc;
    }
    .bookCBot{
        width: calc(100% - 10px);
        padding: 0 5px;
        display: flex;
        border-bottom: 1px solid #ccc;
    }
    .booksh{
        display: none
    }
    .bookCenterB{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .bookCenterBCang{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        display: none;
    }
    .bookXuan{
        flex: 1;
        text-align: center;
        line-height: 30px;
        padding:10px 0;
        font-size: 15px;
    }
    .colorBook{
        color: #428bca;
    }
    .bookAdd{
        width: calc(100% - 20px);
        background: #fff;
        padding: 0 10px;
        display: none;
    }
    .bookAddOne{
        width: 100%;
        line-height: 30px;
        padding: 10px 0;
        color:#4f81d4;
    }

    /*成交率漏斗*/
    .bossCenZTopCHead{
        text-align: center;
        line-height: 50px;
        background: #ddd;
    }
    .bossCenZTopCN{
        padding-top: 15px;
        background: #fff;
    }
    .bossCenZTopCNO{
        width: 100%;
        position: relative;
        margin-bottom: 5px;
    }
    .bossCenZTopCNO1{
        width: 100%;
        position: relative;
    }
    .bossCenZTopCNOt { 
        border-top: 35px solid #FF5F1A; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 50%; 
        margin: auto;
    } 
    .bossCenZTopCNOz{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 82%
    }
    .bossCenZTopCNOt1 { 
        border-top: 35px solid #FEAB2B; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 35%; 
        margin: auto;
    } 
    .bossCenZTopCNOz1{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw1{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 74%
    }
    .bossCenZTopCNOt2 { 
        border-top: 35px solid #0FD35D; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 20%; 
        margin: auto;
    } 
    .bossCenZTopCNOz2{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw2{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 68%
    }
    .bossCenZTopCNOt3 { 
        border-top: 35px solid #3EC4D2; 
        border-left: 0px solid transparent; 
        border-right: 0px solid transparent; 
        height: 0; 
        width: 20%; 
        margin: auto;
    } 
    .bossCenZTopCNOz3{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
  /*  .bossCenZTopCNOw3{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 64%
    }*/
    .bossCenZTopCNBot{
        width: calc(100% - 20px);
        display: flex;
        padding: 10px 10px 0 10px;
        background: #fff;
    }
    .bossCenZTopCNBotO{
        width: 33.33%;
        text-align: center;
        line-height: 35px;
        font-size: 12px;
    }
    .bossCenZTopCNBotOW{
        width: 15px;
        display: inline-block;
        position: relative;
    }
    .bossCenZTopCNBotOS{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background: #FF5F1A;
        /*margin-top: 12.5px;*/
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopCNBotOS1{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background: #FEAB2B;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopCNBotOS2{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background: #0FD35D;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .labelOne{
        width:calc(100% - 20px);
        line-height: 30px;
        padding: 10px;
        border-bottom: 1px solid #eee;
        
    }

    

</style>

</head>
<body>
     <div class="book">
        <!-- <div class="bookSou"><input type="text" class="souInput"><div class="souBtn"><i class='iconfont icon-fangdajing'></i></div></div> -->
        <div class="bossCenZTopC">
                <div class="bossCenZTopCHead">我的成交率漏斗</div>
                <div class="bossCenZTopCN">
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt"></div><div class="bossCenZTopCNOz"><span class="peoperNum"></span>人</div><div class="bossCenZTopCNOw"></div></div>
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt1"></div><div class="bossCenZTopCNOz1"><span class="peoperNum1"></span>人</div><div class="bossCenZTopCNOw1"></div></div>
                    <div class="bossCenZTopCNO1"><div class="bossCenZTopCNOt2"></div><div class="bossCenZTopCNOz2"><span class="peoperNum2"></span>人</div><div class="bossCenZTopCNOw2"></div></div>
                </div>
                <div class="bossCenZTopCNBot">
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS"></div></div> ≤ 20%
                    </div>
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS1"></div></div> ≤ 40%
                    </div>
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS2"></div></div> ≤ 60%
                    </div>
                </div>
            </div>
        <div class="bookTop">
            <div class="bookN">
                <div class="bookNL"><span class="bookfe bookfes">所有客户</span></div>
                <div class="bookNR"><span class="bookfe1">客户标签</span></div>
            </div>
        </div>
        <div class="bookCenter">
            <div class="bookCenterT">
                <!-- <div class="bookCx"><span class="bookName">最后活动时间</span><i class='iconfont icon-jiantousanjiaoxia bookxia'></i><i class='iconfont icon-jiantou booksh'></i></div> -->
                <div class="bookCBot">
                    <div class="bookXuan colorBook" sid="activity">活动时间</div>
                    <div class="bookXuan" sid="follow">跟进</div>
                    <div class="bookXuan" sid="rate">成交率</div>
                </div>
            </div>
            <div class="bookCenterB">
                
            </div>
        </div>
        <div class="bookAdd">
            <div class="bookAddOne" onclick="window.location.href='https://business.17jxyx.com/enterprise/v1/book/add?id=0'"><i class='iconfont icon-jiahaozhankai'></i> 新建标签</div>
            
        </div>
    
    <div style="height: 63px;"></div>
    </div>
    
</body>


<script type="text/javascript">
    //获取成员
    function peoperAjax(names){
        console.log(names)
        $.ajax({
            url:"https://business.17jxyx.com/enterprise/v1/book/list",
            type:"POST",
            contentType: "application/json",
            dataType:"json",
            data:JSON.stringify({
              token:document.cookie.slice(document.cookie.indexOf("=")+1),
              type:names
            }),
            success:function(res){
              console.log(res.data)
              console.log(res)
              if($(".bookPeo").length>0){
                $(".bookPeo").each(function(ind,el){
                    el.remove()
                })

              }
              var span;
              if(res.data){
                span = $("<span class='activity'> ("+res.data.length+")</span>")
                res.data.forEach(function(dom,index){
                    var div = $("<div class='one bookPeo' cid='"+dom.id+"'><div class='ongImg'><img src='"+dom.avatar_url+"'></div><div class='oneName' >"+dom.nickname+"</div></div>")
                    $(div).appendTo(".bookCenterB")
                })
              }else{
                span = $("<span class='activity'> (0)</span>")
                var div = $("<div class='one bookPeo' style='text-align: center;display:blok'>暂无客户</div>")
                $(div).appendTo(".bookCenterB")
              }
              $(span).appendTo(".colorBook")
              var bookPeo = document.querySelectorAll(".bookPeo")
              goto(bookPeo)

            },
            error:function(res){
              console.log(res)
              alert("请求数据失败")
            }
        })
    }
    peoperAjax("activity")

    allAjax()
    //获取所有标签
    function allAjax(){
        $.ajax({
            url:"https://business.17jxyx.com/enterprise/v1/book/label/list",
            type:"POST",
            contentType: "application/json",
            dataType:"json",
            data:JSON.stringify({
              token:document.cookie.slice(document.cookie.indexOf("=")+1),
            }),
            success:function(res){
                // console.log( JSON.parse(res.data))
                console.log(res.data)
                res.data.forEach(function(el,index){
                    var divAll = "<div class='labelOne' sid='"+el.id+"'>"+el.name+"</div>"
                    $(".bookAddOne").before(divAll)
                })
                var labelOne = document.querySelectorAll(".labelOne")
                url(labelOne)
            },
            error:function(res){
              console.log(res)
              alert("请求数据失败")
            }
        })
    }
    //进入标签
    function url(arr){
        Array.from(arr).forEach(function(dom,ind){
            dom.onclick = function(){
                // console.log(dom.getAttribute("sid"))
                window.location.href=`https://business.17jxyx.com/enterprise/v1/book/add?id=${dom.getAttribute("sid")}`
            }
        })
    }

    //进入个人详情
    function goto(arr){
        Array.from(arr).forEach(function(doms,inds){
            doms.onclick = function(){
                console.log(doms.getAttribute("cid"))
                window.location.href=`https://business.17jxyx.com/enterprise/v1/book/details?id=${doms.getAttribute("cid")}`
            }
        })
    }
    var bookPan = false;
    $(".bookfe").click(function(){
        $(".bookfe1").removeClass("bookfes")
        $(".bookfe").addClass("bookfes")
        $(".bookAdd").css("display","none")
        $(".bookCenter").css("display","block")
    })
    $(".bookfe1").click(function(){
        $(".bookfe").removeClass("bookfes")
        $(".bookfe1").addClass("bookfes")
        $(".bookCenter").css("display","none")
        $(".bookAdd").css("display","block")
    })
    var bookXuan = document.querySelectorAll(".bookXuan")
    Array.from(bookXuan).forEach(function(dom,index){
        dom.onclick = function(){
            Array.from(bookXuan).forEach(function(doma,indexa){
                doma.classList.remove("colorBook")
            })
            $(".activity").remove()
            dom.classList.add("colorBook")
            peoperAjax(dom.getAttribute("sid"))
        }
    })
    function bookuan(){
        var bookXuan = document.querySelectorAll(".bookXuan")
        Array.from(bookXuan).forEach(function(dom,index){
            dom.onclick = function(){
            }
        })
    }
    

</script>
</body>
</html>